{% extends "base.html.twig" %}
{% block title %}Registration
{% endblock %}
{% block head %}
	<link rel="stylesheet" href="../styles/registration.css">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
	<script>
		$(document).ready(function () {
			$('input[name=email]').keyup(function () {
				var email = $(this).val();
				console.log('email: ' + email);
				// email = encodeURIComponent(email);
				$('#emailTaken').load("isemailtaken/" + email);
			});
		});
	</script>
	{{ parent() }}
{% endblock %}

{% block content %}

	<section class="section p-5">

		<div class="container">

			<div class="row g-2 mt-5">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<h3 class="h3 card-title" id="exampleModalNavLabel">Register</h3>
						</div>
						<div class="modal-body">
							<form method="post" enctype="multipart/form-data">
								<div class="col-md">
									<div class="form-floating mb-3 shadow-sm">
										<input type="text" class="form-control" id="floatingInputNameF" name="firstName" placeholder="Jane" value = "{{ v.first_name }}">
										<label for="floatingInputNameF">First Name:</label>
										<div class="redText">{{errorList.firstName}}</div>
									</div>
								</div>

								<div class="col-md">
									<div class="form-floating mb-3 shadow-sm">
										<input type="text" class="form-control" id="floatingInputNameL" name="lastName" placeholder="Doe" value = "{{ v.first_name }}">
										<label for="floatingInputNameL">Last Name:</label>
										<div class="redText">{{errorList.lastName}}</div>
									</div>
								</div>

								<div class="col-md">
									<div class="form-floating mb-3 shadow-sm">
										<input type="email" class="form-control" id="floatingInputEmail" name="email" placeholder="name@example.com" value="{{ v.email }}">
										<label for="floatingInputEmail">Email</label>
										<div id="emailTaken" class="redText">{{errorList.email}}</div>
										<span id="emailTaken" name="emailTaken" class="redText"></span>
									</div>
								</div>

								<div class="col-md">
									<div class="form-floating mb-3 shadow-sm">
										<input type="tel" class="form-control" id="floatingInputPhone" name="phone" placeholder="555-555-5555" value="{{ v.phone_number }}">
										<label for="floatingInputPhone">Phone (555-555-5555)</label>
										<div class="redText">{{errorList.phone}}</div>
									</div>
								</div>

								<div class="col-md">
									<div class="form-floating mb-3 shadow-sm">
										<input type="password" class="form-control" id="floatingPassword1" name="password1" placeholder="Password">
										<label for="floatingPassword1">Password</label>
										<div class="redText">{{errorList.password1}}</div>
									</div>
								</div>

								<div class="col-md">
									<div class="form-floating mb-3 shadow-sm">
										<input type="password" class="form-control" id="floatingPassword2" name="password2" placeholder="Password">
										<label for="floatingPassword2">Password (Repeated):</label>
									</div>
								</div>

								<div class="submitButtonBox">
									<input class="submitButton" type="submit" name="submit" value="Register!" onclick="confirmContact()">
								</div>
								<br/><br/>
								<div id="confirmMessage"></div>
							</form>
						</div>
						<div class="modal-footer">
							<p>Already have an account?</p>
							<a class="logInButtonBox" href="https://travel.fsd01.ca/login">
								<button class="btn logInButton">Sign in</button>
							</a>
						</div>
					</div>
				</div>
			</div>

		</div>

	</section>

{% endblock %}
